import React from "react";
import { Steps, Table, Tooltip } from "antd";
import styles from "./NodeLog.less";

const { Step } = Steps;

const Status = {
  "NORMAL": "正常",
  "WARNING": "预警",
  "TIMEOUT": "超时",
  "END": "终止",
  "PAUSE": "暂停",
  "RECALL": "撤销",
  "ERROR": "错误",
};

class NodeLog extends React.Component {

  columns = [
    {
      title: "操作类型",
      dataIndex: "type",
      key: "type",
      width: 120,
    },
    {
      title: "操作时间",
      dataIndex: "createTime",
      key: "createTime",
      width: 160,
    },
    {
      title: "内容",
      dataIndex: "content",
      key: "content",
      width: 470,
      render: (content) => (
        <Tooltip placement="topLeft" title={content} overlayStyle={{ width: 470 }}>
          <span className={styles.tdContent}>{content}</span>
        </Tooltip>
      ),
    },
  ];

  statusClassName = (status) => status === "NORMAL" ? "" : styles.error;

  getStepDes = (item) => {
    const resultClassName = styles[item.approval === "通过" ? "ok" : "error"];
    return (
      <div>
        <span className={styles.mr16}>
          <span>处理人：</span>
          <span>{item.assignee}</span>
        </span>
        <span className={styles.mr16}>
          <span className={styles.mr16}>{item.linkStatus === "DONE" ? "已处理" : "待处理"}</span>
          <span className={this.statusClassName(item.status)}>{Status[item.status]}</span>
        </span>
        {
          item.taskName === "审批节点" ? (
            <span>
              <span className={styles.mr16}>审批结果</span>
              <span className={resultClassName}>{item.approval}</span>
            </span>
          ) : null
        }
      </div>
    );
  };

  getLogDes = (data = {}) => (
    <div>
      <div>
        <span>创建时间：</span>
        <span>{data.createTime || "--"}</span>
      </div>
      <div>
        <span>内容：</span>
        <span>{data.content || "--"}</span>
      </div>
    </div>
  );

  renderDetail = (nodeLog) => {
    const { taskName, activityId, candidateUsers = [], status, linkStatus, assigneeItems = [], arriveTime, processLimitDuration } = nodeLog;
    return (
      <div>
        <div className={[styles.title, 'dynamic-title'].join(' ')}>操作详情</div>
        <div className={styles.totalInfo}>
          <div className={styles.mb8}>
            <span className={[styles.infoTit, 'dynamic-color'].join(' ')}>{taskName}</span>
            <span className={styles.mr16}>{activityId}</span>
          </div>
          <span className={styles.mr16}>
            <span>代办人：</span>
            <span>{candidateUsers || "--"}</span>
          </span>
          <span className={styles.mr16}>
            <span>到达时间：</span>
            <span>{arriveTime || "--"}</span>
          </span>
          <span className={styles.mr16}>
            <span>处理时限：</span>
            <span>{processLimitDuration || "--"}</span>
          </span>
          <span className={styles.mr16}>
            <span>状态：</span>
            <span className={this.statusClassName(status)}>{Status[status] || "--"}</span>
          </span>
          <span className={styles.mr16}>
            <span>环节：</span>
            <span>{linkStatus === "DONE" ? "已处理" : "待处理"}</span>
          </span>
        </div>
        <div className={styles.detailInfo}>
          <Steps progressDot direction="vertical">
            {Array.isArray(assigneeItems) && assigneeItems.map((item = {}, index) => (
              <Step
                key={index}
                status="process"
                title={item.completeTime}
                description={this.getStepDes(item)}
              />
            ))}
          </Steps>
        </div>
      </div>
    );
  };

  renderLog = (logs) => {
    return (
      <div>
        <div className={[styles.title, 'dynamic-color'].join(' ')}>操作日志</div>
        <Table
          rowKey="id"
          columns={this.columns}
          dataSource={logs}
          pagination={{ hideOnSinglePage: true }}
        />
      </div>
    );
  };

  render() {
    const { nodeLog = {} } = this.props;
    return (
      <div className={styles.root}>
        {this.renderDetail(nodeLog)}
        {this.renderLog(nodeLog.logs)}
      </div>
    );
  }

}

export default NodeLog;